<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:include="themes/bobey/blog_include :: blogHeader(title=${blogConfig['blog.config.title'].configValue},
keywords=${blogConfig['blog.config.keywords'].configValue},
description=${blogConfig['blog.config.description'].configValue},
blogConfig=${blogConfig})" />

	</head>
	<body>
		<th:block th:include="themes/bobey/blog_include::menu(menus=${menus},blogConfig=${blogConfig})" />
		<!-- 主体部分 -->
		<section class="bobey-main-box">
			<div class="layui-row ">
				<div class="layui-col-md9  bobey-left-box" id="miao-left">
					<div class="bobey-left-content">
					<th:block th:include="themes/bobey/blog_include::blogArticlesByCat(cat=${cat},posts=${posts})" />
					</div>
				</div>

				<!-- 主体部分右边 -->
				<div class="layui-col-md3 bobey-right-box">
				<th:block th:include="themes/bobey/blog_include::rightCommen"/>
				</div>
			</div>

		</section>

		<!-- 底部导航 -->
		<th:block th:include="themes/bobey/blog_include::bottom" />
		<th:block th:include="themes/bobey/blog_include::footer_js" />

		<script th:inline="JavaScript">
			$(document).ready(function() {

			var tags = [[${tags}]],entries = [];
			$.each(tags, function(index, element) {
				entries.push({
					label: element.tagName,
					url: [[${blogConfig['blog.config.index'].configValue}]]+"/tag/"+element.tagId,
					target: '_top'
				})
			});

				var settings = {
					entries: entries,
					width: $('#bobey-tags').width(),
					height: $('#bobey-tags').width(),
					radius: '60%',
					radiusMin: 75,
					bgDraw: true,
					bgColor: '#494A5F',
					opacityOver: 1.00,
					opacityOut: 0.05,
					opacitySpeed: 6,
					fov: 800,
					speed: 0.5,
					fontFamily: 'Oswald, Arial, sans-serif',
					fontSize: '15',
					fontColor: '#fff',
					fontWeight: 'normal', //bold
					fontStyle: 'normal', //italic 
					fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
					fontToUpperCase: true
				};

				//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );
				$('#tag-cloud').svg3DTagCloud(settings);

			});

			layui.use(['element', 'carousel', 'layer'], function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
				var layer = layui.layer;
				var carousel = layui.carousel;

				//建造实例
				carousel.render({
					elem: '#test1',
					width: '100%' //设置容器宽度
						,
					arrow: 'always' //始终显示箭头
					//,anim: 'updown' //切换动画方式
				});

				window.onresize = function() {
					location.reload();
				}

				$(".bobey-aside-button").click(function() {
					$(".bobey-nav-aside").css("display", "block");

					if ($(".bobey-nav-aside").hasClass("slideInDown")) {

						$(".bobey-nav-aside").removeClass("slideInDown");
						$(".bobey-nav-aside").addClass("slideOutUp");
						$("body").css("overflow-y", "auto");
					} else {

						$(".bobey-nav-aside").removeClass("slideOutUp");
						$(".bobey-nav-aside").addClass("slideInDown");
						$("body").css("overflow-y", "hidden");

					}

				});
				//监听导航点击
				element.on('nav(demo)', function(elem) {
					console.log(elem);

				});
			});
			$(".side_con>li").mousemove(function() {
				$(".side_con>li").removeClass("on");
				$(this).addClass("on");
			})
			// grab an element
			var elem = document.querySelector("nav");
			var headroom = new Headroom(elem, {
				"tolerance": 5,
				"offset": 205,
				"classes": {
					"initial": "animated",
					"pinned": "slideInDown",
					"unpinned": "slideOutUp"
				}
			});
			headroom.init();
		</script>
	</body>

</html>
